<template>
    <div>
        <div style="margin: 10px 0">
            <el-form :model="pagequery" ref="queryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="登录地址" prop="ipaddr">
                    <el-input
                            v-model="pagequery.localtion"
                            placeholder="请输入登录地址"
                            clearable
                            style="width: 240px;"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="用户名称" prop="userName">
                    <el-input
                            v-model="pagequery.userName"
                            placeholder="请输入用户名称"
                            clearable
                            style="width: 240px;"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select
                            v-model="pagequery.status"
                            placeholder="登录状态"
                            clearable
                            style="width: 240px"
                    >
                        <el-option
                                v-for="dict in dict.type.sys_common_status"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="登录时间">
                    <el-date-picker
                            v-model="dateRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="dateFormat"
                            :default-time="['00:00:00', '23:59:59']"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="load">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div style="margin: 10px 0">
            <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确定批量删除这些数据吗？"
                    @confirm="handleDelete"
            >
                <el-button style="margin: 0 5px" size="mini" icon="el-icon-delete" type="danger" plain slot="reference">批量删除</el-button>
            </el-popconfirm>
            <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确定清空数据吗？"
                    @confirm="handleDeleteAll"
            >
                <el-button style="margin: 0 5px" size="mini" icon="el-icon-delete" type="danger" plain slot="reference">清空</el-button>
            </el-popconfirm>
        </div>
        <el-table ref="tables" border stripe  v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="访问编号" align="center" prop="id" />
            <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
            <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
            <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
            <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
            <el-table-column label="操作系统" align="center" prop="os" />
            <el-table-column label="登录状态" align="center" prop="status">
<!--                <template slot-scope="scope">-->
<!--                    <el-tag type="success" v-if="scope.row.status==0">成功</el-tag>-->
<!--                    <el-tag type="danger" v-else-if="scope.row.status==1">失败</el-tag>-->
<!--                </template>-->
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_login_status" :value="scope.row.status"/>
                </template>
            </el-table-column>
            <el-table-column label="操作信息" align="center" prop="msg" :show-overflow-tooltip="true" />
            <el-table-column label="登录日期" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.loginTime }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagequery.pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pagequery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>


    </div>
</template>

<script>
    import * as loginlogAPI from '@/api/system/log/logininfo'
    import {delOperlogById} from "@/api/system/log/operlog";
    export default {
        name: "Role",
        dicts:['sys_common_status'],
        data() {
            return {
                // 遮罩层
                loading: true,
                dateRange: '',
                dicts: [{value: '0', label: '成功'}, {value: '1', label: '失败'}],
                tableData: [],
                total: 0,
                pagequery: {  //分页查询条件
                    pageNum: 1,
                    pageSize: 10,
                    name:''
                },
                ids: [],
            }
        },
        methods: {
            load() {
                this.loading = true
                loginlogAPI.getLoginlogsPage(this.pagequery).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.loading = false
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const loginlogIds =  row?.id || this.ids;
                if(loginlogIds.length<=0){
                    this.$message.warning("请选择删除的日志")
                    return
                }
                loginlogAPI.delLoginlogById(loginlogIds).then(res => {
                    if (res.code===200) {
                        this.$message.success("删除成功")
                        this.load();
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            handleDeleteAll(){
                loginlogAPI.delAllLoginlogs().then(res=>{
                    if(res.code===200){
                        this.load()
                        this.$message.success("清空"+res.data+"条登录日志")
                    }
                })
            },
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
            },
            delBatch() {
                let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
                if(ids.length===0){
                    this.$message.warning("请选择删除的角色")
                    return
                }
                loginlogAPI.delLoginlogsByIds(ids).then(res => {
                    if (res.code === 200) {
                        this.$message.success("批量删除成功")
                        this.load()
                    } else {
                        if(res.msg!==''){
                            this.$message.error(res.msg)
                        }else{
                            this.$message.error("删除失败")
                        }
                    }
                })
            },
            reset() {
                this.pagequery = {  //分页查询条件
                    pageNum: 1,
                    pageSize: 10,
                }
                this.dateRange = ''
                this.load()
            },
            handleSizeChange(pageSize) {
                this.pagequery.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                this.pagequery.pageNum = pageNum
                this.load()
            },

            //获取时间区间方法
            dateFormat(picker) {
                this.pagequery.startTime = picker[0]
                this.pagequery.endTime = picker[1]
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.load();
            },
        },
        created() {
            this.load()
        },

    }
</script>
<style>

</style>
